import { ComponentType, RenderComponent } from './RenderComponent'
import { DragRectangleComponent } from './DragRectangleComponent'

export class SignatureComponent extends RenderComponent {
  constructor(
    _startX: number,
    _startY: number,
    _endX: number = _startX + 100,
    _endY: number = _startY + 30,
    public color: string = '#00f',
    public isFill: boolean = false
  ) {
    super(_startX, _startY, _endX, _endY);
    this.dragComponent = new DragRectangleComponent(this);
    this.props.type = ComponentType.SIGNATURE;
  }

  public render(ctx: CanvasRenderingContext2D) {
    const width = this.endX - this.startX;
    const height = this.endY - this.startY;
    ctx.beginPath();
    ctx.save()
    ctx.font = `${window.devicePixelRatio * 16}px Microsoft YaHei`;
    /*左右对齐方式 (center left right start end) 基准起始坐标*/
    ctx.textAlign = 'center';
    /*垂直对齐的方式 基线 baseline(top,bottom,middle) 基准起始坐标*/
    ctx.textBaseline = 'middle';
    ctx.fillStyle = this.color;
    ctx.fillText('手 写 签 名', this.startX + width / 2, this.startY + height / 2);
    ctx.strokeStyle = this.color;
    ctx.rect(this.startX, this.startY, width, height);
    ctx.stroke()
    ctx.restore()
    ctx.closePath();
    this.dragComponent && this.dragComponent.render(ctx)
    this.renderPostion(ctx)
  }

  isInside(x: number, y: number): boolean {
    return x >= this.startX && x <= this.endX && y >= this.startY && y <= this.endY;
  }
}
